<template>
  <div class="p-6">
    <h3 class="text-xl font-bold mb-6">布局测试组件</h3>
    
    <!-- 测试1: 原始Grid布局 - Tailwind CSS v4语法 -->
    <div class="mb-8">
      <h4 class="text-sm font-medium text-gray-400 mb-3">测试1: 原始Grid布局 (v4语法)</h4>
      <div class="grid grid-cols-1 @sm:grid-cols-2 @md:grid-cols-4 gap-6">
        <div class="bg-dark-card rounded-xl p-6">卡片1</div>
        <div class="bg-dark-card rounded-xl p-6">卡片2</div>
        <div class="bg-dark-card rounded-xl p-6">卡片3</div>
        <div class="bg-dark-card rounded-xl p-6">卡片4</div>
      </div>
    </div>

    <!-- 测试2: 使用Flexbox布局 -->
    <div class="mb-8">
      <h4 class="text-sm font-medium text-gray-400 mb-3">测试2: Flexbox布局</h4>
      <div class="flex flex-wrap gap-6">
        <div class="bg-dark-card rounded-xl p-6 flex-1 min-w-[200px]">卡片1</div>
        <div class="bg-dark-card rounded-xl p-6 flex-1 min-w-[200px]">卡片2</div>
        <div class="bg-dark-card rounded-xl p-6 flex-1 min-w-[200px]">卡片3</div>
        <div class="bg-dark-card rounded-xl p-6 flex-1 min-w-[200px]">卡片4</div>
      </div>
    </div>

    <!-- 测试3: 带明确宽度的Flexbox布局 -->
    <div class="mb-8">
      <h4 class="text-sm font-medium text-gray-400 mb-3">测试3: 带明确宽度的Flexbox布局</h4>
      <div class="flex flex-wrap gap-6">
        <div class="bg-dark-card rounded-xl p-6 w-full sm:w-[calc(50%-12px)] md:w-[calc(25%-12px)]">卡片1</div>
        <div class="bg-dark-card rounded-xl p-6 w-full sm:w-[calc(50%-12px)] md:w-[calc(25%-12px)]">卡片2</div>
        <div class="bg-dark-card rounded-xl p-6 w-full sm:w-[calc(50%-12px)] md:w-[calc(25%-12px)]">卡片3</div>
        <div class="bg-dark-card rounded-xl p-6 w-full sm:w-[calc(50%-12px)] md:w-[calc(25%-12px)]">卡片4</div>
      </div>
    </div>

    <!-- 测试4: 直接内联样式 -->
    <div class="mb-8">
      <h4 class="text-sm font-medium text-gray-400 mb-3">测试4: 直接内联样式</h4>
      <div style="display: flex; flex-wrap: wrap; gap: 24px;">
        <div class="bg-dark-card rounded-xl p-6" style="flex: 1; min-width: 200px;">卡片1</div>
        <div class="bg-dark-card rounded-xl p-6" style="flex: 1; min-width: 200px;">卡片2</div>
        <div class="bg-dark-card rounded-xl p-6" style="flex: 1; min-width: 200px;">卡片3</div>
        <div class="bg-dark-card rounded-xl p-6" style="flex: 1; min-width: 200px;">卡片4</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 布局测试组件，用于验证不同的布局方案
</script>

<style scoped>
/* 组件样式 */
</style>